<#include "/layout/default.ftl">

<#-- Add specific to courses JS files. -->
<#if !courses.content?has_content>
    <#assign head_js_courses>
        <@head_js>
        <script src="${baseUrl}/bootstrap/js/course/index/index.js"></script></@head_js>
    </#assign>
    <#macro head_js>${head_js_courses}</#macro>
</#if>

<#macro mainContainer>
<div class="container-fluid">
    <div class="content">
        <div class="page-header">
            <h3><#if courses.i18n?has_content>${courses.i18n.header}</#if></h3>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <#if !courses.content?has_content>
                    <#if courses.i18n?has_content>
                        <p>${courses.i18n.no_courses_message!"Ви не приєднані до жодного з курсів, це можна зробити на "}
                            <a href="">${courses.i18n.a_course_list_label!"сторінці з переліком курсів"}</a>.
                        </p>
                    </#if>
                <#else>
                <div class="row-fluid">
                    <div class="span8">
                        <div class="row-fluid">
                            <#list courses.content as current>
                                <div class="span12 course-block mycourse">
                                    <h3>
                                        <a href="${baseUrl}/material/?course_id=${current.id}">${current.title}</a>
                                        <small>(${current.startDate?date}&nbsp;/&nbsp;${current.finishDate?date})</small>
                                    </h3>
                                    <hr/>

                                    <div class="row-fluid">
                                        <div class="span3">
                                            <#if current.logoURL?has_content>
                                                <img src="${current.logoURL}" alt="course logo"
                                                     style="width:260px;height:180px;"/>
                                            <#else>
                                                <img src="http://placehold.it/260x180" alt=""/>
                                            </#if>
                                        </div>
                                        <div class="span8 offset1">${current.shortDescription}</div>
                                    </div>

                                    <#-- Unenroll course actions-->
                                    <#if loggedOnUser?has_content>
                                        <hr/>
                                        <div class="pull-left">
                                            <a class="btn" href="#unenrollModal" data-toggle="modal" onclick="$('input[name=course_id]').val(${current.id})">
                                            <i class="icon-remove"></i>
                                                <#if courses.i18n?has_content>
                                                    ${courses.i18n.unenroll_button_label}
                                                <#else>
                                                    Залишити курс
                                                </#if>
                                            </a>
                                        </div>
                                        <div class="pull-right">
                                            <a class="btn btn-primary" href="${baseUrl}/material/?course_id=${current.id}">
                                                <i class="icon-info-sign icon-white"></i>
                                                <#if courses.i18n?has_content>
                                                    ${courses.i18n.show_materials_button_label}
                                                <#else>
                                                    Перегляд матеріалу
                                                </#if>
                                            </a>
                                        </div>
                                    </#if>
                                </div>
                            </#list>
                        </div> <#-- Inner .row-fluid -->
                    </div> <#-- .span8 -->
                    <#-- Right sidebar with upcoming HW -->
                    <div class="span3 offset1 course-block">
                        <h4 class="centered">${courses.i18n.hw_block_header!"Поточне домашнє завдання."}</h4>
                        <hr/>
                        <#assign hwCounter = 1>
                        <#list upcomingHW as current>
                            <h5>${current.getCourseTitle()}</h5>
                            <ul>
                                <li>${current.getMaterialTitle()}
                                    <ul>
                                        <li>
                                            <a href="${baseUrl}/homework/view/?homework_id=${current.getHwId()}">
                                                ${courses.i18n.hw_link_label}&nbsp;${hwCounter}
                                            </a><br/>
                                            <i class="icon-time"></i>&nbsp;
                                            <small>
                                                ${courses.i18n.hw_okuntil_label}&nbsp;${current.getHwDueDate()?date}
                                            </small>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <#assign hwCounter = hwCounter + 1>
                        </#list>
                    </div> <#-- .span3 .offset1 .course-block -->
                </div>

                </#if>
            </div>
        </div>
    </div>
    <div class="push"></div>
</div>
</#macro>

<#macro head_title>
<title>
    <#if courses.i18n?has_content>
        ${courses.i18n.header}
    <#else>
        Мої курси.
    </#if>
</title>
</#macro>


<@render/>
